<template>
    <div>
        <music-header></music-header>
        <div class="music">
            <van-tabs v-model="activeName" color="rgb(18,150,255)">
                <van-tab title="热门推荐" name="a" class="tab">
                    <van-loading size="20px" style="text-align: center;margin-top: 10px" v-if="placeholder">加载中...
                    </van-loading>
                    <ul class="song" v-else>
                        <li v-for="(item,index) in songlist" :key="index">
                            <img :src="item.album.picUrl" alt="" style="width: 50px; height: 50px; border-radius: 50%;">
                            <div class="song-detail">
                                <p>{{item.name}}</p>
                                <p style="font-size: 12px; color: #999999;">{{item.name}}</p>
                            </div>
                            <div style="font-size: 20px">
                                <van-icon name="play-circle-o" v-if="songId != item.id" @click="play(item.id)"/>
                                <van-icon name="pause-circle-o" v-else @click="pause"/>
                            </div>
                            <div style="width: 5%;">
                                <span>{{index+1}}</span>
                            </div>
                            <audio v-if="songId == item.id" :src="songUrl" ref="audio" autoplay loop>

                            </audio>
                        </li>
                    </ul>
                </van-tab>
                <van-tab title="最新MV" name="b" class="tab">
                    <van-loading size="20px" style="text-align: center;margin-top: 10px;" v-if="placeholder">加载中...
                    </van-loading>
                    <ul class="song" v-else>
                        <li v-for="(item,index) in songMv" :key="index">
                            <video v-if="songId == item.id" :src="MvUrl"  width="100%" style="margin-bottom: 10px; z-index: -1;" controls autoplay loop>

                            </video>
                            <img :src="item.cover" alt="" v-if="songId != item.id" style="width: 100%; height: 163.13px; margin-bottom: 10px;">
                            <div class="song-detail">
                                <p>{{item.name}}</p>
                                <p style="font-size: 12px; color: #999999;">{{item.artistName}}</p>
                            </div>
                            <div style="font-size: 20px">
                                <van-icon name="play-circle-o" v-if="songId != item.id" @click="playMv(item.id)"/>
                                <van-icon name="pause-circle-o" v-else @click="pauseMv"/>
                            </div>
                            <div style="width: 5%;">
                                <span>{{index+1}}</span>
                            </div>

                        </li>
                    </ul>
                </van-tab>

            </van-tabs>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from "../components/Footer";
    import musicHeader from "../components/musicHeader";
    import {getmusic} from "../api/api";
    import {getsongUrl, getMvUrl, getMusicMv} from "../api/api";

    export default {
        name: "music",
        data() {
            return {
                activeName: 'a',
                songlist: [],
                songUrl: "",
                songMv: [],
                MvUrl: "",
                songId: 0,
                placeholder: true
            }
        },
        methods: {
            play(id) {
                this.songId = id;
                getsongUrl(id).then(res => {
                    // console.log(res)
                    this.songUrl = res.data[0].url;

                })
            },
            pause() {
                this.songId = 0;
            },
            playMv(id){
                // console.log(id)

                getMvUrl(id).then(res => {
                    // console.log(res)
                    this.MvUrl = res.data.url;
                    // console.log(this.MvUrl)
                    this.songId = id;

                })
            },
            pauseMv(){
                this.songId = 0;
            }

        },

        components: {
            musicHeader,
            Footer
        },
        created() {
            getmusic().then(res => {
                // console.log(res);
                this.songlist = res.data;
                this.placeholder = false;
            })
            getMusicMv().then(res => {
                // console.log(res);

                this.songMv = res.data;
                this.songMv.splice(0,1);
                // this.songMv.reverse()
            })
        }
    }
</script>

<style lang="less" scoped>
    .music {
        height: calc(100vh - 90px);
        overflow: scroll;
    }

    .song-detail {
        width: 60%;

        p {
            width: 50%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .song {
        li {

            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 10px 10px;
            padding: 5px;
            border-bottom: 1px solid #eaeaea;
        }
    }

    .tab {
        height: calc(100vh - 135px);
        overflow: scroll;
    }
</style>